<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG编辑器原型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            height: 100vh;
            overflow: hidden;
        }

        /* 顶部工具栏 */
        .top-toolbar {
            height: 50px;
            background: #fff;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            padding: 0 16px;
            justify-content: space-between;
        }

        .top-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-btn {
            width: 40px;
            height: 32px;
            background: #e0e0e0;
            border: none;
            border-radius: 20px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            background: #fff;
            font-size: 12px;
            color: #333;
            cursor: pointer;
        }

        .action-btn:hover {
            background: #f8f8f8;
        }

        .save-btn {
            background: #fef3cd;
            border-color: #ffeaa7;
            color: #d63031;
        }

        .top-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .export-btn {
            background: #6c5ce7;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
        }

        /* 主要内容区域 */
        .main-content {
            display: flex;
            height: calc(100vh - 50px);
        }

        /* 左侧工具面板 */
        .left-sidebar {
            width: 60px;
            background: #fff;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
            padding: 16px 0;
            position: relative;
        }

        .tool-item {
            width: 44px;
            height: 44px;
            margin: 4px 8px;
            border: none;
            border-radius: 8px;
            background: #f8f8f8;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #666;
        }

        .tool-item.active {
            background: #e3f2fd;
            color: #1976d2;
        }

        .tool-item:hover {
            background: #f0f0f0;
        }

        .tool-label {
            font-size: 10px;
            margin-top: 2px;
        }

        /* 工具展开面板 */
        .tool-panel {
            position: absolute;
            left: 60px;
            top: 0;
            width: 300px;
            height: 100%;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-left: none;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
            display: none;
            flex-direction: column;
            z-index: 100;
        }

        .tool-panel.show {
            display: flex;
        }

        .panel-header {
            height: 50px;
            padding: 0 16px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f8f8;
            font-weight: bold;
            color: #333;
        }

        .panel-content {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
        }

        .search-box {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            font-size: 14px;
            margin-bottom: 16px;
        }

        .category-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .category-tab {
            padding: 6px 12px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            background: #f8f8f8;
            font-size: 12px;
            cursor: pointer;
            color: #666;
        }

        .category-tab.active {
            background: #e3f2fd;
            border-color: #1976d2;
            color: #1976d2;
        }

        .template-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 20px;
        }

        .template-item {
            aspect-ratio: 1;
            background: #f8f8f8;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            color: #666;
            transition: all 0.2s;
        }

        .template-item:hover {
            border-color: #1976d2;
            background: #f0f8ff;
        }

        .section-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin: 16px 0 8px 0;
        }

        .table-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .table-item {
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background: #f8f8f8;
            cursor: pointer;
            transition: all 0.2s;
        }

        .table-item:hover {
            border-color: #1976d2;
            background: #f0f8ff;
        }

        .table-title {
            font-size: 12px;
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
        }

        .table-preview {
            font-size: 10px;
            color: #666;
            font-family: monospace;
            line-height: 1.2;
        }

        /* 中间编辑区域 */
        .editor-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #f8f8f8;
        }

        /* 文字工具栏 - 上方中间位置 */
        .text-toolbar {
            position: absolute;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            height: 40px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: none;
            align-items: center;
            padding: 0 12px;
            gap: 6px;
            z-index: 1000;
            width: auto;
            max-width: 400px;
        }

        .text-toolbar.show {
            display: flex;
        }

        .font-select {
            padding: 4px 8px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            font-size: 12px;
            background: #fff;
        }

        .font-size-control {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .font-size-btn {
            width: 24px;
            height: 24px;
            border: 1px solid #d0d0d0;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .font-size-input {
            width: 40px;
            padding: 4px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            text-align: center;
            font-size: 12px;
        }

        .format-btn {
            width: 28px;
            height: 28px;
            border: 1px solid #d0d0d0;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            font-size: 12px;
        }

        .format-btn.active {
            background: #e3f2fd;
            border-color: #1976d2;
            color: #1976d2;
        }

        .color-picker {
            width: 28px;
            height: 28px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            cursor: pointer;
            background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
        }

        /* 画布区域 */
        .canvas-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
        }

        .canvas-wrapper {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            position: relative;
        }

        .canvas {
            width: 400px;
            height: 400px;
            background: #fff;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }

        /* 印章设计 */
        .stamp-design {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .stamp-circle {
            width: 300px;
            height: 300px;
            border: 3px solid #4fc3f7;
            border-radius: 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
        }

        .stamp-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .address-line-1 {
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            font-style: italic;
            color: #333;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .address-line-1:hover {
            background-color: rgba(79, 195, 247, 0.1);
        }

        .address-line-2 {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            font-style: italic;
            color: #333;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .address-line-2:hover {
            background-color: rgba(79, 195, 247, 0.1);
        }

        .butterfly {
            width: 80px;
            height: 60px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80"><path d="M50 40c-10-20-30-15-25 0s20 10 25-5c5 15 20 20 25 5s-15-20-25 0z" fill="%23000"/><path d="M30 25c-8-5-15 0-10 8s12 5 10-8zm40 0c8-5 15 0 10 8s-12 5-10-8z" fill="%23000"/><circle cx="35" cy="30" r="3" fill="%23fff"/><circle cx="65" cy="30" r="3" fill="%23fff"/></svg>') no-repeat center;
            background-size: contain;
        }

        .side-letters {
            position: absolute;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .side-letters:hover {
            background-color: rgba(79, 195, 247, 0.1);
        }

        .letter-v {
            left: 60px;
            top: 50%;
            transform: translateY(-50%);
        }

        .letter-m {
            right: 60px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* 缩放控制 */
        .zoom-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            padding: 8px 12px;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .zoom-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: #f0f0f0;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .zoom-level {
            font-size: 12px;
            color: #666;
            min-width: 40px;
            text-align: center;
        }

        /* 右侧属性面板 */
        .right-sidebar {
            width: 60px;
            background: #fff;
            border-left: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 8px;
            position: relative;
        }

        .property-icon {
            width: 44px;
            height: 44px;
            background: #f8f8f8;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            cursor: pointer;
            font-size: 18px;
            color: #666;
        }

        .property-icon:hover {
            background: #f0f0f0;
        }

        .property-icon.active {
            background: #e3f2fd;
            color: #1976d2;
        }

        /* 属性展开面板 */
        .property-panel {
            position: absolute;
            right: 60px;
            top: 0;
            width: 300px;
            height: 100%;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-right: none;
            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
            display: none;
            flex-direction: column;
            z-index: 100;
        }

        .property-panel.show {
            display: flex;
        }

        .property-panel-header {
            height: 50px;
            padding: 0 16px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f8f8;
            font-weight: bold;
            color: #333;
        }

        .property-panel-content {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
        }

        .property-section {
            margin-bottom: 20px;
        }

        .property-section-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e0e0e0;
        }

        .property-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .property-label {
            font-size: 12px;
            color: #666;
            min-width: 60px;
        }

        .property-input {
            flex: 1;
            padding: 4px 8px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
        }

        .property-input-group {
            display: flex;
            gap: 8px;
            flex: 1;
            margin-left: 8px;
        }

        .property-input-small {
            width: 60px;
            padding: 4px 6px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            font-size: 12px;
            text-align: center;
        }

        .property-slider {
            flex: 1;
            margin: 0 8px;
        }

        .property-color-picker {
            width: 30px;
            height: 24px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 8px;
        }

        .property-dropdown {
            flex: 1;
            padding: 4px 8px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
            background: #fff;
        }

        .property-checkbox {
            margin-left: 8px;
        }

        .stroke-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
        }

        .stroke-style-btn {
            width: 40px;
            height: 24px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        .stroke-style-btn.active {
            background: #e3f2fd;
            border-color: #1976d2;
        }

        /* 选择框 */
        .selection-box {
            position: absolute;
            border: 2px dashed #4fc3f7;
            background: rgba(79, 195, 247, 0.1);
            pointer-events: none;
        }

        .selection-handles {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #4fc3f7;
            border: 1px solid #fff;
            border-radius: 50%;
        }

        .handle-tl {
            top: -4px;
            left: -4px;
        }

        .handle-tr {
            top: -4px;
            right: -4px;
        }

        .handle-bl {
            bottom: -4px;
            left: -4px;
        }

        .handle-br {
            bottom: -4px;
            right: -4px;
        }

        .handle-tm {
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
        }

        .handle-bm {
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
        }

        .handle-ml {
            top: 50%;
            left: -4px;
            transform: translateY(-50%);
        }

        .handle-mr {
            top: 50%;
            right: -4px;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <!-- 顶部工具栏 -->
    <div class="top-toolbar">
        <div class="top-left">
            <button class="logo-btn">Logo</button>
            <button class="action-btn">
                📷 截图
            </button>
            <button class="action-btn">
                📋 复制
            </button>
            <button class="action-btn save-btn">
                ⭐ Save
            </button>
            <button class="action-btn">↶</button>
            <button class="action-btn">↷</button>
        </div>
        <div class="top-right">
            <button class="action-btn">🔧 Engraving tips</button>
            <button class="action-btn">🔄 Change template</button>
            <button class="action-btn">👁 Preview</button>
            <button class="export-btn">📤 导出</button>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 左侧工具面板 -->
        <div class="left-sidebar">
            <button class="tool-item active" data-tool="text">
                <div>T</div>
                <div class="tool-label">文字</div>
            </button>
            <button class="tool-item" data-tool="image">
                <div>🖼</div>
                <div class="tool-label">图片</div>
            </button>
            <button class="tool-item" data-tool="shape">
                <div>⬜</div>
                <div class="tool-label">形状</div>
            </button>
            <button class="tool-item" data-tool="template">
                <div>📄</div>
                <div class="tool-label">模板</div>
            </button>

            <!-- 工具展开面板 -->
            <div class="tool-panel" id="text-panel">
                <div class="panel-header">文字工具</div>
                <div class="panel-content">
                    <input type="text" class="search-box" placeholder="搜索文字样式...">
                    <div class="category-tabs">
                        <button class="category-tab active">基础</button>
                        <button class="category-tab">艺术</button>
                    </div>
                    <div class="template-grid">
                        <div class="template-item">标题文字</div>
                        <div class="template-item">正文文字</div>
                        <div class="template-item">装饰文字</div>
                        <div class="template-item">手写体</div>
                    </div>
                </div>
            </div>

            <div class="tool-panel" id="image-panel">
                <div class="panel-header">图片工具</div>
                <div class="panel-content">
                    <input type="text" class="search-box" placeholder="搜索图片...">
                    <div class="category-tabs">
                        <button class="category-tab active">分类1</button>
                        <button class="category-tab">分类2</button>
                    </div>
                    <div class="template-grid">
                        <div class="template-item">🦋 蝴蝶</div>
                        <div class="template-item">🌸 花朵</div>
                        <div class="template-item">⭐ 星星</div>
                        <div class="template-item">❤️ 爱心</div>
                    </div>
                </div>
            </div>

            <div class="tool-panel" id="shape-panel">
                <div class="panel-header">形状工具</div>
                <div class="panel-content">
                    <div class="template-grid">
                        <div class="template-item">⭕ 圆形</div>
                        <div class="template-item">⬜ 方形</div>
                        <div class="template-item">🔺 三角</div>
                        <div class="template-item">⭐ 星形</div>
                    </div>
                </div>
            </div>

            <div class="tool-panel" id="template-panel">
                <div class="panel-header">模版</div>
                <div class="panel-content">
                    <input type="text" class="search-box" placeholder="🔍 搜索">
                    <div class="category-tabs">
                        <button class="category-tab active">分类1</button>
                        <button class="category-tab">分类2</button>
                    </div>
                    <div class="template-grid">
                        <div class="template-item">印章模版1</div>
                        <div class="template-item">印章模版2</div>
                        <div class="template-item">Logo模版1</div>
                        <div class="template-item">Logo模版2</div>
                    </div>

                    <div class="section-title">列表 (3)</div>
                    <div class="table-list">
                        <div class="table-item">
                            <div class="table-title">消息通知列表</div>
                            <div class="table-preview">
                                姓名 | 电话 | 邮箱<br>
                                张三 | 138xxxx | xxx@xx.com<br>
                                李四 | 139xxxx | xxx@xx.com
                            </div>
                        </div>
                        <div class="table-item">
                            <div class="table-title">后台列表</div>
                            <div class="table-preview">
                                ID | 名称 | 状态<br>
                                01 | 项目A | 进行中<br>
                                02 | 项目B | 已完成
                            </div>
                        </div>
                        <div class="table-item">
                            <div class="table-title">设置列表</div>
                            <div class="table-preview">
                                配置项 | 值<br>
                                主题 | 深色<br>
                                语言 | 中文
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间编辑区域 -->
        <div class="editor-area">
            <!-- 文字工具栏 -->
            <div class="text-toolbar">
                <select class="font-select">
                    <option>华康金字典体</option>
                    <option>宋体</option>
                    <option>黑体</option>
                </select>

                <div class="font-size-control">
                    <button class="font-size-btn">-</button>
                    <input type="text" class="font-size-input" value="104">
                    <button class="font-size-btn">+</button>
                </div>

                <button class="format-btn">B</button>
                <button class="format-btn">I</button>
                <button class="format-btn">U</button>

                <div class="color-picker"></div>
                <button class="action-btn">特效</button>
            </div>

            <!-- 画布区域 -->
            <div class="canvas-container">
                <div class="canvas-wrapper">
                    <div class="canvas">
                        <div class="stamp-design">
                            <div class="stamp-circle">
                                <div class="stamp-content">
                                    <div class="address-line-1">address line 1</div>
                                    <div class="butterfly"></div>
                                    <div class="side-letters letter-v">V</div>
                                    <div class="side-letters letter-m">M</div>
                                    <div class="address-line-2">address line 2</div>
                                </div>
                            </div>
                        </div>

                        <!-- 选择框 -->
                        <div class="selection-box" style="top: 50px; left: 50px; width: 300px; height: 300px;">
                            <div class="selection-handles handle-tl"></div>
                            <div class="selection-handles handle-tr"></div>
                            <div class="selection-handles handle-bl"></div>
                            <div class="selection-handles handle-br"></div>
                            <div class="selection-handles handle-tm"></div>
                            <div class="selection-handles handle-bm"></div>
                            <div class="selection-handles handle-ml"></div>
                            <div class="selection-handles handle-mr"></div>
                        </div>
                    </div>
                </div>

                <!-- 缩放控制 -->
                <div class="zoom-controls">
                    <button class="zoom-btn">-</button>
                    <span class="zoom-level">100%</span>
                    <button class="zoom-btn">+</button>
                    <button class="zoom-btn">⚙</button>
                </div>
            </div>
        </div>

        <!-- 右侧属性面板 -->
        <div class="right-sidebar">
            <button class="property-icon" data-property="layers">
                <div>≡</div>
            </button>
            <button class="property-icon" data-property="properties">
                <div>📐</div>
            </button>

            <!-- 属性展开面板 -->
            <div class="property-panel" id="layers-panel">
                <div class="property-panel-header">图层</div>
                <div class="property-panel-content">
                    <div class="property-section">
                        <div class="property-section-title">图层列表</div>
                        <div class="table-list">
                            <div class="table-item">
                                <div class="table-title">🔵 圆形边框</div>
                                <div class="table-preview">可见 | 锁定</div>
                            </div>
                            <div class="table-item">
                                <div class="table-title">🦋 蝴蝶图案</div>
                                <div class="table-preview">可见 | 解锁</div>
                            </div>
                            <div class="table-item">
                                <div class="table-title">📝 地址文字1</div>
                                <div class="table-preview">可见 | 解锁</div>
                            </div>
                            <div class="table-item">
                                <div class="table-title">📝 地址文字2</div>
                                <div class="table-preview">可见 | 解锁</div>
                            </div>
                            <div class="table-item">
                                <div class="table-title">🔤 字母V</div>
                                <div class="table-preview">可见 | 解锁</div>
                            </div>
                            <div class="table-item">
                                <div class="table-title">🔤 字母M</div>
                                <div class="table-preview">可见 | 解锁</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="property-panel" id="properties-panel">
                <div class="property-panel-header">属性</div>
                <div class="property-panel-content">
                    <div class="property-section">
                        <div class="property-section-title">位置</div>
                        <div class="property-row">
                            <span class="property-label">X</span>
                            <input type="number" class="property-input-small" value="260">
                            <span class="property-label">Y</span>
                            <input type="number" class="property-input-small" value="25">
                        </div>
                    </div>

                    <div class="property-section">
                        <div class="property-section-title">尺寸</div>
                        <div class="property-row">
                            <span class="property-label">W</span>
                            <input type="number" class="property-input-small" value="119">
                            <span class="property-label">H</span>
                            <input type="number" class="property-input-small" value="58">
                            <button class="stroke-style-btn">🔗</button>
                        </div>
                    </div>

                    <div class="property-section">
                        <div class="property-section-title">旋转</div>
                        <div class="property-row">
                            <span class="property-label">角度</span>
                            <input type="number" class="property-input-small" value="0">
                            <span class="property-label">°</span>
                            <input type="number" class="property-input-small" value="20">
                            <button class="stroke-style-btn">↻</button>
                        </div>
                    </div>

                    <div class="property-section">
                        <div class="property-section-title">不透明度</div>
                        <div class="property-row">
                            <span class="property-label">透明度</span>
                            <input type="range" class="property-slider" min="0" max="100" value="100">
                            <span class="property-label">100%</span>
                        </div>
                    </div>

                    <div class="property-section">
                        <div class="property-section-title">描边</div>
                        <div class="property-row">
                            <span class="property-label">颜色</span>
                            <div class="property-color-picker" style="background: #4fc3f7;"></div>
                            <select class="property-dropdown">
                                <option>实线</option>
                                <option>虚线</option>
                                <option>点线</option>
                            </select>
                        </div>
                        <div class="stroke-controls">
                            <button class="stroke-style-btn active">—</button>
                            <button class="stroke-style-btn">- -</button>
                            <button class="stroke-style-btn">···</button>
                        </div>
                    </div>

                    <div class="property-section">
                        <div class="property-section-title">文本</div>
                        <div class="property-row">
                            <span class="property-label">字体</span>
                            <select class="property-dropdown">
                                <option>Noto Sans SC</option>
                                <option>宋体</option>
                                <option>黑体</option>
                            </select>
                        </div>
                        <div class="property-row">
                            <span class="property-label">样式</span>
                            <select class="property-dropdown">
                                <option>Regular</option>
                                <option>Bold</option>
                                <option>Italic</option>
                            </select>
                            <input type="number" class="property-input-small" value="14">
                        </div>
                        <div class="property-row">
                            <button class="stroke-style-btn">≡</button>
                            <button class="stroke-style-btn">✦</button>
                            <button class="format-btn active">B</button>
                            <button class="format-btn">U</button>
                            <button class="format-btn">S</button>
                            <button class="stroke-style-btn">···</button>
                        </div>
                    </div>

                    <div class="property-section">
                        <div class="property-section-title">填充</div>
                        <div class="property-row">
                            <span class="property-label">颜色</span>
                            <div class="property-color-picker" style="background: #C4C4C4;"></div>
                            <span class="property-label">100%</span>
                            <input type="checkbox" class="property-checkbox" checked>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let currentActivePanel = null;
            const textToolbar = document.querySelector('.text-toolbar');

            // 工具选择和面板展开功能
            const toolItems = document.querySelectorAll('.tool-item');
            const toolPanels = document.querySelectorAll('.tool-panel');

            toolItems.forEach(item => {
                item.addEventListener('click', function () {
                    const toolType = this.getAttribute('data-tool');
                    const targetPanel = document.getElementById(toolType + '-panel');

                    // 更新工具选中状态
                    toolItems.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    // 切换面板显示
                    if (currentActivePanel === targetPanel && targetPanel.classList.contains('show')) {
                        // 如果点击的是当前已显示的面板，则隐藏
                        targetPanel.classList.remove('show');
                        currentActivePanel = null;
                    } else {
                        // 隐藏所有面板
                        toolPanels.forEach(panel => panel.classList.remove('show'));
                        // 显示目标面板
                        if (targetPanel) {
                            targetPanel.classList.add('show');
                            currentActivePanel = targetPanel;
                        }
                    }
                });
            });

            // 右侧属性面板功能
            let currentActivePropertyPanel = null;
            const propertyIcons = document.querySelectorAll('.property-icon');
            const propertyPanels = document.querySelectorAll('.property-panel');

            propertyIcons.forEach(icon => {
                icon.addEventListener('click', function () {
                    const propertyType = this.getAttribute('data-property');
                    const targetPanel = document.getElementById(propertyType + '-panel');

                    // 更新属性图标选中状态
                    propertyIcons.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');

                    // 切换面板显示
                    if (currentActivePropertyPanel === targetPanel && targetPanel.classList.contains('show')) {
                        // 如果点击的是当前已显示的面板，则隐藏
                        targetPanel.classList.remove('show');
                        currentActivePropertyPanel = null;
                        this.classList.remove('active');
                    } else {
                        // 隐藏所有属性面板
                        propertyPanels.forEach(panel => panel.classList.remove('show'));
                        // 显示目标面板
                        if (targetPanel) {
                            targetPanel.classList.add('show');
                            currentActivePropertyPanel = targetPanel;
                        }
                    }
                });
            });

            // 点击其他区域关闭面板
            document.addEventListener('click', function (e) {
                if (!e.target.closest('.left-sidebar')) {
                    toolPanels.forEach(panel => panel.classList.remove('show'));
                    currentActivePanel = null;
                }
                
                if (!e.target.closest('.right-sidebar')) {
                    propertyPanels.forEach(panel => panel.classList.remove('show'));
                    propertyIcons.forEach(icon => icon.classList.remove('active'));
                    currentActivePropertyPanel = null;
                }
            });

            // 画布元素点击显示文字工具栏
            const canvasElements = document.querySelectorAll('.address-line-1, .address-line-2, .side-letters, .butterfly');

            canvasElements.forEach(element => {
                element.addEventListener('click', function (e) {
                    e.stopPropagation();

                    // 显示文字工具栏
                    textToolbar.classList.add('show');

                    // 如果是文字元素，选中文字工具
                    if (this.classList.contains('address-line-1') ||
                        this.classList.contains('address-line-2') ||
                        this.classList.contains('side-letters')) {

                        // 选中文字工具
                        toolItems.forEach(t => t.classList.remove('active'));
                        document.querySelector('[data-tool="text"]').classList.add('active');
                    }
                });
            });

            // 点击画布其他区域隐藏文字工具栏
            document.querySelector('.canvas').addEventListener('click', function (e) {
                if (!e.target.closest('.address-line-1, .address-line-2, .side-letters, .butterfly')) {
                    textToolbar.classList.remove('show');
                }
            });

            // 点击文字工具栏外部隐藏工具栏
            document.addEventListener('click', function (e) {
                if (!e.target.closest('.text-toolbar') && !e.target.closest('.address-line-1, .address-line-2, .side-letters')) {
                    textToolbar.classList.remove('show');
                }
            });

            // 分类标签切换
            const categoryTabs = document.querySelectorAll('.category-tab');
            categoryTabs.forEach(tab => {
                tab.addEventListener('click', function () {
                    // 找到同一面板内的其他标签
                    const panel = this.closest('.tool-panel');
                    const panelTabs = panel.querySelectorAll('.category-tab');

                    panelTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 格式按钮切换
            const formatBtns = document.querySelectorAll('.format-btn');
            formatBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    this.classList.toggle('active');
                });
            });

            // 字体大小控制
            const fontSizeInput = document.querySelector('.font-size-input');
            const fontSizeBtns = document.querySelectorAll('.font-size-btn');

            if (fontSizeBtns.length >= 2) {
                fontSizeBtns[0].addEventListener('click', function () {
                    let size = parseInt(fontSizeInput.value);
                    fontSizeInput.value = Math.max(8, size - 2);
                });

                fontSizeBtns[1].addEventListener('click', function () {
                    let size = parseInt(fontSizeInput.value);
                    fontSizeInput.value = size + 2;
                });
            }

            // 缩放控制
            const zoomLevel = document.querySelector('.zoom-level');
            const zoomBtns = document.querySelectorAll('.zoom-btn');

            if (zoomBtns.length >= 2) {
                zoomBtns[0].addEventListener('click', function () {
                    let zoom = parseInt(zoomLevel.textContent);
                    zoomLevel.textContent = Math.max(10, zoom - 10) + '%';
                });

                zoomBtns[1].addEventListener('click', function () {
                    let zoom = parseInt(zoomLevel.textContent);
                    zoomLevel.textContent = Math.min(500, zoom + 10) + '%';
                });
            }

            // 模板项点击效果
            const templateItems = document.querySelectorAll('.template-item');
            templateItems.forEach(item => {
                item.addEventListener('click', function () {
                    console.log('选择了模板:', this.textContent);
                    // 这里可以添加选择模板的逻辑
                });
            });

            // 表格项点击效果
            const tableItems = document.querySelectorAll('.table-item');
            tableItems.forEach(item => {
                item.addEventListener('click', function () {
                    console.log('选择了表格:', this.querySelector('.table-title').textContent);
                    // 这里可以添加选择表格的逻辑
                });
            });

            // 属性面板交互功能
            // 透明度滑块
            const opacitySlider = document.querySelector('.property-slider');
            if (opacitySlider) {
                opacitySlider.addEventListener('input', function() {
                    const value = this.value;
                    const label = this.parentElement.querySelector('.property-label:last-child');
                    if (label) {
                        label.textContent = value + '%';
                    }
                });
            }

            // 描边样式按钮
            const strokeStyleBtns = document.querySelectorAll('.stroke-style-btn');
            strokeStyleBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 如果是描边样式组，只允许单选
                    if (this.parentElement.classList.contains('stroke-controls')) {
                        const siblings = this.parentElement.querySelectorAll('.stroke-style-btn');
                        siblings.forEach(sibling => sibling.classList.remove('active'));
                        this.classList.add('active');
                    } else {
                        // 其他按钮可以切换
                        this.classList.toggle('active');
                    }
                });
            });

            // 属性输入框数值变化
            const propertyInputs = document.querySelectorAll('.property-input-small');
            propertyInputs.forEach(input => {
                input.addEventListener('change', function() {
                    console.log('属性值变化:', this.previousElementSibling?.textContent, this.value);
                    // 这里可以添加实时更新画布的逻辑
                });
            });

            // 颜色选择器点击
            const colorPickers = document.querySelectorAll('.property-color-picker');
            colorPickers.forEach(picker => {
                picker.addEventListener('click', function() {
                    console.log('点击颜色选择器');
                    // 这里可以添加颜色选择器弹窗的逻辑
                });
            });
        });
    </script>
</body>

</html>